<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../libs/bootstrap-3.4.1-dist/css/bootstrap.min.css">
  <script src="../js/jquery-3.1.1.js"></script>  
  <script src="../libs/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
  <style>
body>div:first-child>button{
  color: #6554C0;
  background-color: #E7E6F5;
  outline:none;
  font-weight: 900;
  border-radius: 6px;
  border: none;
  width: 120px;
  height: 39.2px;
  line-height: 39.2px;
  padding: 0;
}
body>div:first-child{
  margin-top: 20px;
}
body>div:nth-child(2){
  background-color: #F2F2F2;
  height: 40px;
  line-height: 40px;
  font-weight: 900;
}
h4{
  font-weight: 900;
  margin: 0;
  height: 39.2px;
  line-height: 39.2px;
}
body>div:first-child{
  margin-bottom: 20px;
}
ul{
  list-style: none;
  margin:0;
  padding: 0;
 
}
li{
  height: 40px;
  overflow: hidden;
 margin: 20px 0;
}
.bianji{
  color: #5FA4E2;
  background-color: #EEF6FC;
  outline:none;
  font-weight: 900;
  border-radius: 6px;
  border: none;
  height: 37px;
  width: 40px;
  vertical-align: middle; padding: 0;
}
.shanchu{
color: #FFCEC5;
background-color: #FEF3F3;
outline:none;
  font-weight: 900;
  border-radius: 6px;
  border: none;
  height: 37px;
  width: 40px;
  vertical-align: middle; padding: 0;
}
.zhankai{
  background-color: #EDF8F6;
  color: #64CAC7;
  outline:none;
  font-weight: 900;
  border-radius: 6px;
  border: none;
  height: 37px;
  width: 40px;
  vertical-align: middle;
}
.tianjia{
  color: #FEA858;
  background-color: #FEF2E6;
  outline:none;
  font-weight: 900;
  border-radius: 6px;
  border: none;
  height: 37px;
  width: 40px;
  padding: 0;
}

.modal-body>span{
  margin-right: 10px;
}
#myspan{
  display: inline-block;
}
  </style>
</head>
<body>
  <div class="container">
  <h4 class="col-md-3 item">装备分类</h4>
  <!-- <button class="col-md-2 item col-md-offset-7">添加分类</button> -->
  <!-- 模态框 -->
  <button type="button" class="btn btn-primary btn-lg col-md-2 item col-md-offset-7" data-toggle="modal" data-target="#myModal">
    新增分类
  </button>
  <div class="modal fade"  role="dialog" aria-labelledby="mySmallModalLabel" id="myModal">
    <div class="modal-dialog modal-sm" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h5 class="modal-title" id="gridSystemModalLabel">新增分类</h5>
        </div>
        <div class="modal-body">
          <span>分类名称</span><input type="text" onfocus="this.placeholder=''" onblur="this.placeholder='请输入分类名称'" placeholder='请输入分类名称' id="input_1">
        </div>
        <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary">确认</button>
      </div>
      </div>
      
    </div>
  </div>

  </div>
 <div class="container">
   <span class="col-md-4 item">装备分类</span>
   <span class="col-md-4 item">装备数</span>
   <span class="col-md-4 item">操作</span>
 </div>
 <div id="mydiv" class="container">

 </div>




  <script src="../js/zhuangbeifenlei.js"></script>
</body>
</html>